<template>
	<div class="word_com">
		<div class="word_con">
			<div class="word_item" v-for="(word_item, word_index) in wordList" :key="word_index">
				<div :style="textConStyle">
					<div class="text_item" :style="textItemStyle(item, index)" v-for="(item, index) in word_item.list" :key="index">
						<div :style="wordStyle(item, index)">{{item.name}}</div>
					</div>
				</div>
				<div class="operate_con">
					<span>文字组合_{{word_index + 1}}</span>
				</div>
				<div class="loading_con" v-if="loading">
					<LoadingOutlined style="font-size: 27px;" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {defineComponent, ref, reactive, toRefs, computed, nextTick, watch} from 'vue';
	import {
		PlusOutlined,
		FormOutlined,
		DeleteOutlined,
		LoadingOutlined
	} from "@ant-design/icons-vue";
	import store from '@/store';
	export default defineComponent({
		components: {
			PlusOutlined,
			FormOutlined,
			DeleteOutlined,
			LoadingOutlined
		},
		props: {
			materialList: {
				type: Array,
				default: () => {
					return []
				}
			},
			radioType: {
				type: String,
				default: '9:16'
			}
		},
		setup(props, context) {
			const state = reactive({
				wordList: [],
				loading: false
			})
			
			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {	
					console.error(error);
					state.loading = false
				});
			}
			
			const textConStyle = computed(()=>{
				return {
					position: 'relative',
					backgroundImage: `url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: 360/2 + 'px',
					height: props.radioType == '1:1'?360/2+'px':props.radioType == '16:9'?202.5/2+'px':640/2+'px'
				}
			})
			
			const wordStyle = computed(() => {
				return function(item, index) {
					return {
						'cursor': 'grab',
						'font-family': 'HappyZcool-2016',
						'font-size': item.font_size/2 + 'px',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'line-height': item.height/2 + 'px',
						'text-align': 'center',
						'color': item.color,
						'white-space': 'nowrap'
					}
				}
			})
			
			const textItemStyle = computed(()=>{
				return function(item, index) {
					return {
						'position': 'absolute',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'left': item.elLeft/2 +'px',
						'top': item.elTop/2 +'px'
					}
				}
			})
			if(props.materialList?.length && props.materialList[0][0]?.originData){
				state.wordList = props.materialList[0][0]?.originData
				state.loading = true
				customFont('HappyZcool-2016', 'https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/material/20231225/fonts/zhan_ku_kuai_le_ti_ttf.ttf')
			}
			
			return {
				wordStyle,
				textItemStyle,
				textConStyle,
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.word_com{
		.word_con{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.word_item{
				border-radius: 5px;
				width: 180px;
				min-height: 320px;
				background-color: #000;
				// border: 1px solid #646464;
				margin-top: 30px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				.loading_con{
					position: absolute;
					width: 100%;
					height: 320px;
					background-color: rgba(0, 0, 0, .3);
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				
				.operate_con{
					position: absolute;
					width: 100%;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					left: 0;
					bottom: -35px;
					color: #000;
				}
			}
		}
	}
</style>